<template>
  <el-pagination
      background
      layout="total, prev, pager, next"
      :total="total"
      :page-size="10"
      @current-change="setpage"
      @prev-click="prevpage"
      @next-click="nextpage"
      :current-page="current_page"
      :page-count="num_pages">
  </el-pagination>
</template>

<script>
import {mapActions, mapState} from "vuex";

export default {
  name: "Pagination",
  props: ['total', 'current_page', 'num_pages', 'title'],
  data() {
    return {}
  },
  methods: {
    ...mapActions('Home', ['getArticleAll']),
    ...mapActions('Search', ['getsearch']),
    ...mapActions('ArticleList', ['getMyArticle', 'getMyLikeArticle', 'getMyCollectsArticle']),
    // 页面变化的回调
    setpage() {
      // 获取是否是快速上一页和快速下一页状态
      let bin_quick = event.path[0].classList[2]
      let pag = this.current_page
      let number = event.path[0].innerText * 1; // 获取直接点击的页面数
      if (bin_quick === 'btn-quicknext') {
        pag = this.current_page + 5
        if (pag > this.num_pages) {
          pag = this.num_pages
        }
        // 快速点击上一页
      } else if (bin_quick === 'btn-quickprev') {
        pag = this.current_page - 5
        if (pag < 1) {
          pag = 1
        }
      } // 直接点击页面
      else if (number !== 0) {
        pag = number
      }
      let title = this.$route.path; // 获取当前页面的路由
      // 文章列表发送的参数
      let obj = {
        nid: this.$store.state.userinfo.nid,
        pag,
      }
      // 如果是首页的话
      if (title === '/home') {
        // 文章列表
        this.getArticleAll(pag)
      }// 搜索页
      else if (title === '/search') {
        let obj = this.searchContent
        obj['pag'] = pag
        this.getsearch(obj)
      }
      // 我的博客列表
      else if (this.title === 1) {
        this.getMyArticle(obj)
      }
      // 我的喜欢列表
      else if (this.title === 2) {
        this.getMyLikeArticle(obj)
      }
      // 我的收藏列表
      else if (this.title === 3) {
        this.getMyCollectsArticle(obj)
      }
    },
    // 上一页回调
    prevpage() {
      this.current_page = this.current_page - 1
    },
    // 下一页回调
    nextpage() {
      this.current_page = this.current_page + 1
    },
  },
  computed: {
    ...mapState('Search', ['searchContent', 'paginator'])
  }
}
</script>

<style lang="less">
.el-pagination {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}
</style>